<template>
	<div>
		<div class="remd_newsg">
			<div class="song_ul">
				<div class="song_li" @click="play_song">
					<div class="li_left" v-if="index + 1">
						<div :class="index <= 2?'top_red num':'num'">{{index + 1 | formatOrder}}</div>
					</div>
					<div class="li_right" :style="{width:index?'88%':'100%'}">
						<div class="song_info">
							<div class="song_name">{{song_name}}</div>
							<div class="song_info_down">
								<div class="sq_logo"><img src="../../../assets/sq.png" alt=""></div>
								<div class="singer_album">
									<!-- <div class="singer">{{artists_name | formatSinger}}</div>
									<div>-</div>
									<div class="album">{{album_name}}</div> -->
								{{artists_name | formatSinger}}-{{album_name}}
								
								</div>

							</div>
						</div>
						<div class="play_logo" v-if="(!$store.state.play_state || song_id != song_info.id)">
							<img src="../../../assets/play_logo.png" alt="">
						</div>
						<div @click.stop="pause_song" class="pause_logo" v-else-if="$store.state.play_state && song_id == song_info.id">
							<img src="../../../assets/Rank/pause.png" alt="">
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// import {get_remd_newsong} from '../../../API/recommend.js';
	// import {check_music} from '../../../API/common.js';
	import {
		mapState
	} from 'vuex';

	export default {
		props: {
			index: {
				type: Number,
			},
			song_name: {
				default: "",
			},
			artists_name: {
				default: "",
			},
			album_name: {
				default: "",
			},
			song_id: {
				type: Number,
			},
			picUrl: {
				default: '',
			},
			// 用于接收当前歌曲的歌单 id 集合
			id_list: Array,
			//用于接收 下标
			idx: Number,
		},
		created() {
			// get_remd_newsong().then(res=>{

			// console.log(res,'最新音乐');
			// this.result = res.data.result;
			// console.log(this.result,'最新音乐1.1');
			// })
		},
		data() {
			return {

			};
		},
		filters: {
			formatSinger(val) {
				val = val.map(el => {
					return el.name
				})
				return val.join(" / ");
			},
			formatOrder(val) {
				return val >= 10 ? val : '0' + val;
			}
		},
		methods: {

			async play_song() {
				// 播放音乐
				this.audio.playSong(this.song_id);

				// 将id传入, 拿取该歌曲的id list 并 存入 vuex
				this.$store.dispatch("get_song_detail", this.song_id);

				// 将当前 歌曲所在列表的 id 集合存至仓库内作为播放列表
				this.$store.commit("set_play_list", this.id_list);

				// 将当前歌曲的 idx 存入 vuex state 内的 idx
				this.$store.commit('change_idx', this.idx);

				// 将id 传入， 请求当前歌曲的 歌词 信息 触发vuex 的 方法存入 vuex 内
				this.$store.dispatch('get_lyric', this.song_id);

			},
			pause_song() {
				this.audio.pause();
			}
		},
		computed: {
			...mapState(["playState", "song_info"]),
		},

	}
</script>

<style lang="scss" scoped>
	.top_red {
		color: red;
	}

	.remd_tl::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 2px;
		height: 100%;
		background-color: red;
	}

	.remd_newsg {
		.song_ul {

			// padding-left: 8px;
			.song_li {
				width: 100%;
				display: flex;

				.li_left {
					font-size: 17px;
					display: flex;
					align-items: center;
					width: 40px;
					position: relative;

					.num {
						transform: translateX(-50%);
						position: absolute;
						left: 50%;
					}
				}
				.li_rightNum{
					padding: 6px 0;
					padding-left: 8px;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid rgb(221, 221, 221);
					// -webkit-box-flex: 1;
					width: 88%;
				}
				.li_right {
					padding: 6px 0;
					padding-left: 8px;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid rgb(221, 221, 221);
					// -webkit-box-flex: 1;
					width: 100%;

					.song_info {
						width: 70%;
						// flex: 1 auto;
						flex-grow: 1;
						.song_name {
							font-size: 17px;
							text-align: left;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.song_info_down {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							.sq_logo {
								display: flex;
								align-items: center;
								margin-right: 4px;

								img {
									width: 12px;
									height: 8px;
								}

							}

							.singer_album {
								display: flex;
								flex-wrap: nowrap;
								justify-content: left;
								align-items: center;
								font-size: 12px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								.singer {
									font-size: 12px;
									overflow: hidden;
									
									white-space: nowrap;
									text-overflow: ellipsis;
								}

								.album {
									font-size: 12px;

								}
							}

						}
					}
				}

				.play_logo {
					display: flex;
					align-items: center;
					padding: 0 10px;

					img {
						width: 22px;
						height: 22px;
					}
				}

				.pause_logo {
					display: flex;
					align-items: center;
					padding: 0 10px;

					img {
						width: 22px;
						height: 22px;
					}
				}
			}
		}
	}
</style>
